<template>
  <div>
    <!-- logo区域 -->
    <div class="logo">
      <img src="../../login/ui/img/2.jpg" width="60" height="60" />
      <p>红娘后台管理</p>
    </div>
    <!-- 菜单 -->
    <div class="menu">
      <el-menu
        router
        active-text-color="#ffd04b"
        background-color="#f89898"
        text-color="#fff"
      >
        <el-menu-item index="/dashboard">
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span>后台汇总</span>
          </template>
        </el-menu-item>

        <el-sub-menu index="/userManage" class="menu-item">
          <template #title>
            <el-icon><HomeFilled /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/userManage/userList">用户列表</el-menu-item>
          <el-menu-item index="/userManage/userVideo">视频上传</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/customerManage">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/customerManage/customer">客户列表</el-menu-item>
          <el-menu-item index="/customerManage/project">功能页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/ladyManage">
          <template #title>
            <el-icon><WarnTriangleFilled /></el-icon>
            <span>红娘管理</span>
          </template>
       <!-- index 是用来标识菜单项的索引值 -->
          <el-menu-item index="/ladyManage/lady">红娘列表</el-menu-item> 
          <el-menu-item index="/ladyManage/upload">上传视频</el-menu-item> 
        </el-sub-menu>
        <el-sub-menu index="/orderManage">
          <template #title>
            <el-icon><DocumentCopy /></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/orderManage/order">订单列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Edit,
  WarnTriangleFilled,
  DocumentCopy,
  HomeFilled,
  Histogram,
} from "@element-plus/icons-vue";
</script>

<style lang="scss" scoped>
.logo {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  width: 180px;
  height: 60px;
  // background: rgb(233, 145, 220);
  margin-top: 10px;
  border-radius: 5px;
  img {
    display: inline-block;
    margin-right: 10px; /* 添加右侧间距 */
  }
  p {
    line-height: 20px;
    font-size: 18px;
    font-weight: 500;
    color: rgb(13, 46, 4);
    background: linear-gradient(45deg, #43caff, #500338);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
}
.menu {
  margin-top: 30px;

  .el-menu {
    border: none;
  }
}
</style>
